<template>
  <CommonQueryLayout class="user-control">
    <template #top>
      <QueryForm
        :form="queryFormBind"
        :form-item-list="queryFormList"
        :loading="getAccountsLoading"
        @query="getAccountList"
      />
    </template>
    <template #default>
      <TableTopControl
        title-text="账号列表"
        v-model:table-size="tableStateWrapper.tableSize"
        v-model:table-columns="tableStateWrapper.tableColumns"
        :loading="getAccountsLoading"
        @reload-data="getAccountList"
      >
        <a-button
          type="primary"
          @click="openAddUser"
          :loading="fetchRoleListLoading || insertAccountLoading"
          >添加账号</a-button
        >
      </TableTopControl>
      <a-alert
        type="info"
        show-icon
        class="user-control__alert"
        v-if="tableStateWrapper.selectedRowKeys.length > 0"
      >
        <template #message>
          <div class="user-control__alert-message">
            <span
              >当前选中{{ tableStateWrapper.selectedRowKeys.length }}项</span
            >
            <a-popconfirm
              :title="`确定重置选中的${tableStateWrapper.selectedRowKeys.length}个用户的密码吗？`"
              ok-text="确认"
              cancel-text="取消"
              @confirm="resetPassword(tableStateWrapper.selectedRowKeys)"
            >
              <Simbtn
                type="primary"
                :loading="resetAccountPasswordLoading"
                text="批量重置密码"
                danger
                size="small"
                icon="switcher-outlined"
              />
            </a-popconfirm>
          </div>
        </template>
      </a-alert>
      <a-table
        bordered
        :size="tableStateWrapper.tableSize"
        :columns="tableStateWrapper.tableColumns"
        :dataSource="tableStateWrapper.tableData"
        :row-selection="rowSelection"
        :loading="getAccountsLoading"
        :pagination="{
          ...tableStateWrapper.pageInfo,
          showQuickJumper: true,
          showTotal: formatTotal,
        }"
        @change="(e) => handleTableChange(e)"
        rowKey="id"
      >
        <template #options="{ record }">
          <a-space>
            <a-button
              size="small"
              type="primary"
              @click="openEditUser(record)"
              :loading="fetchRoleListLoading || fetchAccountRoleListLoading"
              >编辑</a-button
            >
            <a-popconfirm
              title="确定重置当前账号密码吗？"
              ok-text="确认"
              cancel-text="取消"
              @confirm="resetPassword(record)"
            >
              <a-button
                size="small"
                danger
                type="primary"
                :loading="resetAccountPasswordLoading"
                >重置密码</a-button
              >
            </a-popconfirm>
            <a-popconfirm
              title="确定删除吗？"
              ok-text="确认"
              cancel-text="取消"
              @confirm="delUser(record)"
            >
              <a-button
                size="small"
                danger
                type="primary"
                :loading="deleteAccountLoading"
                >删除</a-button
              >
            </a-popconfirm>
          </a-space>
        </template>
      </a-table>
    </template>
  </CommonQueryLayout>
  <ModifyDialog
    :dialog-state="dialogState"
    @confirm="confirmDialog"
    :confirm-loading="
      insertAccountLoading || updateAccountLoading || updateAccountRoleLoading
    "
  />
</template>

<script setup lang="ts">
import useSearchUser from './hooks/useSearchUser'

import CommonQueryLayout from '@/layout/CommonQueryLayout.vue'
import { TableTopControl } from '@/components/TopControl'
import { QueryForm } from '@/components/Form'
import { Simbtn } from '@/components/Button'
import ModifyDialog from './components/ModifyDialog.vue'

import { onMounted } from 'vue'
import useModifyUser from './hooks/useModifyUser'

const formatTotal = (total: number) => `共${total}条`

const {
  queryFormBind,
  queryFormList,
  getAccountsLoading,
  getAccountList,
  tableStateWrapper,
  rowSelection,
  handleTableChange,
} = useSearchUser()

const {
  dialogState,
  confirmDialog,
  openAddUser,
  insertAccountLoading,
  fetchRoleListLoading,
  fetchAccountRoleListLoading,
  openEditUser,
  updateAccountLoading,
  updateAccountRoleLoading,
  delUser,
  deleteAccountLoading,
  resetPassword,
  resetAccountPasswordLoading,
} = useModifyUser(getAccountList)

onMounted(async () => {
  await getAccountList()
})
</script>

<style lang="scss" scoped>
@include b(user-control) {
  @include e(alert) {
    margin-bottom: 4px;
  }
  @include e(alert-message) {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
